<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-11-29 
 -->


<template>
  <basic-header :data="['系统管理','菜单管理']"></basic-header>
  <el-card>
    <el-button type="primary" v-if="isAuth('sys:menu:save')" @click="addOrUpdatehandle()">新增</el-button>
		<el-table :data="table.tabelData" style="width: 100%;margin-bottom: 20px;" row-key="id" :height="table.tableHeight" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
			<el-table-column prop="name" label="名称" sortable min-width="150"/>
			<el-table-column label="上级菜单" sortable align="center" width="160">
        <template #default="scope">{{ parentName(scope.row) }}</template>
      </el-table-column>
			<el-table-column prop="code" align="center" width="260" :show-overflow-tooltip="true" label="菜单URL">
        <template #default="scope">{{ pathName(scope.row) }}</template>
      </el-table-column>
			<el-table-column align="center" width="120" label="图标">
				<template #default="scope"><i :class="scope.row.icon || ''" /></template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="180" fixed="right">
				<template #default="scope">
					<el-button size="mini" v-if="isAuth('sys:menu:update')" @click="addOrUpdatehandle(scope.row.menuId)">编辑</el-button>
					<el-button size="mini" v-if="isAuth('sys:menu:delete')" type="danger" @click="handleDelete(scope.row.menuId,scope.row.name)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

	</el-card>
</template>

<script lang='js'>
  import { defineComponent, reactive, toRefs, computed, onMounted } from 'vue'
  import menus from "@/menu.json";
  import { loop } from "@/common";
  export default defineComponent({
    name: '~index',
    setup(props, {emit, slots}) {
      const state = reactive({
        table: {
          tableHeight: '',
          tabelData: []
        },
        pagination: {
          pageIndex: 1,
          pageSize: 10,
          total: 0,
          sizeChange(newSize) {
            this.pageSize = newSize;
          },
          currentChange(newPage) {
            this.pageIndex = newPage;
          }
        }
      });
      const getTableHeight = () => {
				const tableH = 233;
				const tableHeightDetil = window.innerHeight - tableH;
				state.table.tableHeight = window.innerHeight - tableH;
			}
    getTableHeight();
    const isAuth = computed(() => () => true);
    const addOrUpdatehandle = () => {}
    const handleDelete = () => {}
    onMounted(() => {
      state.table.tabelData = menus;
      window.addEventListener('resize', getTableHeight);
    });
    
    const parentName = computed(() => {
      return scope => {
        const name = loop(menus, scope.id).name;
        return name !== scope.name ? name : 'root'
      }
    });
    const pathName = computed(() => {
      return scope => {
        const parent = loop(menus, scope.id);
        const code = parent.children.find(e => e.code === scope.code)
        const parentCode = '/' + parent.code;
        const childCode = code ? '/' + code.code : '';
        return parentCode + childCode;
      }
    })
     return {
       isAuth,
       addOrUpdatehandle,
       handleDelete,
       parentName,
       pathName,
       ...toRefs(state),
      }
     }
  })

</script>

<style lang='scss' scoped>

</style>
